<template>
    <div>
        <!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
        <!-- el-row表示行,el-col表示列 ,:span合并列数-->
        <!-- 1.使用ele的各种图标-->
        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <i class="el-icon-edit"></i>
                <i class="el-icon-share"></i>
                <i class="el-icon-delete"></i>
                <i class="el-icon-eleme"></i>
            </el-col>
            <el-col :span="24">
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><el-input placeholder="用户名" v-model="msg"></el-input></el-col>
            <el-col :span="12"><el-input placeholder="密码" v-model="msg" show-password></el-input></el-col>
        </el-row>

        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <!-- 3.使用ele的表格,a创建表格,b准备数据,c绑定数据 -->
        <el-row>
            <el-button type="info" @click="toadd">新增</el-button>
        </el-row>
        <el-table :data="list">
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="卖点" prop="sell"></el-table-column>
            <el-table-column label="描述" prop="desc"></el-table-column>
            <el-table-column label="更多">
                <el-button type="primary" @click="toupdate()">编辑</el-button>
                <el-button type="success" @click="del()">删除</el-button>
            </el-table-column>
        </el-table>

        <!-- 制作表单 el-form表示表单,el-form-item表示表单项
1,数据区提供数据 2,给form指定双向绑定:model="form" 3,input双向绑定获取数据v-model="form.price"
  -->
        <el-form label-width="100px" :model="form">
            <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="卖点">
                <el-input v-model="form.sell"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="详情">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save()" type="success">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 定义导出的组件
export default {
    name: 'Item',
    data() {
        return {
            msg: '京淘电商管理系统',
            input: '',
            // b. 准备表格要的数据
            list: [
                {
                    id: 100,
                    title: '鸿星尔克',
                    sell: '为中国代言',
                    desc: 'to be no.1'
                },
                {
                    id: 101,
                    title: '蜜雪冰城',
                    sell: '一瓶只赚1毛钱',
                    desc: '你爱我我爱你蜜雪冰城甜蜜蜜'
                },
                {
                    id: 102,
                    title: '特步',
                    sell: '有一种踩.的感觉',
                    desc: '飞一样的感觉'
                }
            ],
            //给表单准备数据,数据驱动,双向绑定
            msg: 'hi components',
            form: {
                title: "test",
                sell: '爆款热销',
                price: 999,
                desc: "我是详情..."
            },
        }
    },
    // 1,声明按钮  2,添加事件methods 3,给按钮绑定事件@click
    methods: {
        toadd: function () {
            console.log("新增业务成功")
        },
        toupdate: function () {
            console.log("修改业务成功")
        },
        del: function () {
            console.log("删除成功")
        },
        save: function () { //表单提交
            // console.log("submit")
            console.log(this.m) //调用上面的变量m
        }
    },

}
</script>

<style>

</style>